<template>
  <div id="app">
    <router-view/>
  </div>
</template>


<script>
export default {
    data() {
        return {
            snippet: {}
        }
    },
    computed: {

    },
    mounted() {
        const res = localStorage.getItem('token')
        if (res != null) {
            this.$store.commit('setToken', { data: res })
            this.getUserInfo()
        }
    },
    methods: {
        getUserInfo() {
            const p = new Promise((resolve) => {
                this.axios.get('/api/getUserInfo').then(res => {
                    resolve(res)
                    this.$message({
                        message: `欢迎您回来，${res.data.data.name}`,
                        type: 'success'
                    })
                    this.$store.commit('setUserInfo', res.data.data)
                }).catch((e) => {
                    console.log(e)
                    this.$message.error(e)
                    localStorage.clear('token')
                })
            })
            return p
        }
    }
}
</script>

<style lang="less">
:root {
  // 侧边栏颜色
  --slide-bg-color:rgb(30, 31, 38);
  //侧边栏选中背景色
  --slide-select-bg-color:rgb(24, 25, 30);
  //侧边栏选中字体色
  --slide-select-text-color:rgb(255, 221, 64);
  //头部背景颜色
  --header-bg-color:rgb(30, 31, 38);
  //主背景色
  --main-bg-color: #131417;
  //卡片背景颜色
  --card-bg-color:#1f2229;
  //主字体色
  --text-color:white;
}
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
*::-webkit-scrollbar-track {
  background: #747474;
  border-radius: 2px;
}
*::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 2px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}
*::-webkit-scrollbar-corner {
  background: #747474;
}
.el-tree {
width: 100%;
overflow: auto;
}

.el-tree>.el-tree-node {
display: inline-block;
min-width: 100%;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: grey !important;
}
.el-tree-node__content:hover {
    background-color: grey !important;
}
.el-tree > .el-tree-node:focus {
    display: inline-block;
    min-width: 100%;
}
.el-tree-node:focus>.el-tree-node__content {
    background-color: rgb(94, 94, 94) !important;
}
.el-tree-node__content:focus {
    background-color: grey !important;
}
input::-webkit-input-placeholder {
    color: #8d8d8d  !important;
  }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--text-color);
  font-family: Lato,Lucida Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
}
body{
  padding: 0px;
  margin: 0px;
  background: var(--main-bg-color);

}
.xx-flex-row{
    display: flex;
    flex-direction: row;
}
.el-drawer{
    background-color: rgb(30, 31, 38) !important;
}
#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
@media screen and (max-width: 600px) {
  .el-drawer{
      width: 100% !important;
  }
  .el-main {
      padding: 0px !important;
  }
  .el-tabs__header {
      margin:0px !important;
  }
  .el-message{
    min-width: 90% !important;
  }
}
</style>
